<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入js文件-->
    <script src="js/vue-v2.6.14.js"></script>
</head>
<body>
    <!--创建了一个组件，vue来管理此组件-->
    <div id="app">
        <!--插值表达式-->
        {{message}}
        {{username}}
        {{message+i+100}}
        {{arr[0]}}
        {{arr[1]}}
        {{arr[2]}}

        {{people.sex}}
        {{people.name}}
        {{people.age}}
        {{sayHello()}}
        {{methodB()}}

    </div>
</body>

<script type="text/javascript">
    // el:表示一个元素  #app表示  id=app
    new Vue({
        el:"#app",  //指定了该vue管理的区域
        //定义模型
        data:{
            message:"HelloWorld",
            username:"zhangsan",
            i:100,
            arr:[
                'mybatis','spring','springmvc'
            ],
            people:{
                name:"张三",
                age:18,
                sex:'男'
            }
        },
        //可以定义方法
        methods:{
            methodA:function (){

            },
            methodB(){
                console.log("methodB")
            },
            sayHello(){
                return "say hello!!!";
            }
        }
    });
</script>

</html>